import React from 'react';
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement, incrementByAmount } from './store/couterSlice'
import { receiveDoctorList, getDoctorsAsync } from './store/doctorSlice'
// import { createAsyncThunk } from '@reduxjs/toolkit';
import { useEffect, useState } from 'react'
// import { getDoctorList } from './api/api'
function App() {
  // const [total, settotal] = useState(0);  // 分页用的总条数
  const dispatch = useDispatch()
  // useSelector自动监听state的改变，当state改变时，从新执行useSelecter()
  // 页面也会重新进行渲染
  let count = useSelector(state => {
    console.log(state);
    // 输出的对象，包括counter这个属性；
    //   {
    //     "counter": {
    //         "value": 0,
    //         "isLogin": false
    //     }
    // }
    return state.counter.value
  })

  const doctorsList = useSelector(state => state.doctors.list)

  useEffect(() => {
    // 通过dispatch()，调用getDoctors这个异步的actions函数； 参数会给 createAsyncThunk方法中第二个参数（callback）的payload.
    // 1. 调用组件里面创建的异步actions：
    // dispatch(getDoctors({ limit: 5, page: 1, doctorName: "", doctorJob: "", doctorSex: "" }))

    // 2. 调用reducer切片里面的异步actions：
    dispatch(getDoctorsAsync({ limit: 5, page: 1, doctorName: "", doctorJob: "", doctorSex: "" }))

  }, []);
  const incrementHandler = () => {
    dispatch(increment())
  }
  const decrementHandler = () => {
    dispatch(decrement())
  }
  const incrementHandler2 = (number) => {
    // number传各action.payload, payload属性不能变化
    dispatch(incrementByAmount(number))
  }

  // RTK 异步的actions的写法：
  // createAsyncThunk接受三个参数：字符串操作值、回调和对象。
  // const getDoctors = createAsyncThunk('receiveDoctorListAsync', (payload) => {
  //   getDoctorList(payload)
  //     .then(res => {
  //       if (res.code === 0) {
  //         // console.log(res);
  //         settotal(res.count)

  //   通过dispatch(),分发同步的action给reducer。
  //         dispatch(receiveDoctorList(res.data))
  //       } else {
  //         console.log('请求接口失败');
  //       }
  //     })
  // })
  return (
    <div className="App">
      <h1>count: {count}</h1>
      <div>
        <button type='button' onClick={incrementHandler}>increment</button>
        <button type='button' onClick={decrementHandler}>decrement</button>
        <button type='button' onClick={() => {
          incrementHandler2(100)
        }}>increment 100</button>
        <button type='button' onClick={() => {
          incrementHandler2(1000)
        }}>increment 1000</button>


      </div>
      <h1>医生列表：</h1>
      {
        doctorsList.map(el => {
          return (<p key={el.did}> <span>{el.did}</span> ---- <span>{el.dname}</span> -- <span>{el.dsex}</span> <button type='button'>delete</button></p>)
        })
      }
    </div>
  );
}

export default App;


// content(mapStateToProps, mapDispatchToProps)(App)
// hooks可以直接替代content（）这种写法； 
// 区别： content()这种写法，分容器组件和UI组件的。逻辑都写在容器组件里面，
// ui组件通过props接收数据，只负责页面的渲染。